<template>
  <div class="my-header" :style="{ color: color, background: bg }">
    {{ title }}
  </div>
</template>

<script>
/**
 * 需求：头部的标题, 颜色, 背景色可以随便修改
 */
export default {
  // 基本写法=》只能定义接收员的变量名
  // props: ['title','color','bg']
  // 完整写法
  props: {
    // 显示title
    title: {
      type: String, // 指定传值类型=》校验
      default: '默认title' // 不传显示这个值
    },
    // 字体颜色
    color: {
      type: String,
      default: '#fd1800'
    },
    // 背景色
    bg: {
      type: String,
      default: 'orange'
    }
  },
}
</script>

<style lang="less" scoped>
.my-header {
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #1d7bff;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
</style>